<template>
	<view class="content">
		<appHeader></appHeader>
		<view class='home-tabs'>
			<u-tabs :list="topBar" @change="changeTabs" :current='current' :inactiveStyle="{
					color: '#AAAAAA'
				}" :activeStyle="{
					color: '#333333',
					fontWeight: 'bold',
					fontSize: '29rpx'
				}"></u-tabs>
		</view>
		<view class='home-swiper'>
			<swiper :duration="500" :current='current' @change='changeSwiper' :style='"height:" +swiperHeight + "px"'>
				<swiper-item v-for='(item,index) in topBar' :key='index'>
					<scroll-view scroll-y="true" :style='"height:" +swiperHeight + "px"' @scrolltolower="lower">
						<keep-alive>
							<component :is='activeCom' v-if="index == current" :courseList='courseList'></component>
						</keep-alive>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import appHeader from '@/components/commom/appHeader.vue'
	import Recommend from '@/components/home/recommend.vue'
	import Free from '@/components/home/free.vue'
	import ActualCombat from '@/components/home/actualCombat.vue'
	import {
		searchCourse
	} from '@/api/course.js'
	import {mixin} from '@/mixins/mixin.js'
	export default {
		mixins:[mixin],
		data() {
			return {
				current: 0,
				topBar: [{
					name: '今日推荐',
				}, {
					name: '免费课程',
				}, {
					name: '实战课程'
				}],
				activeCom: Recommend,
				swiperHeight: 0,
				courseList: [],
				courseParams: {
					pageNum: 1,
					pageSize: 3,
					entity: {
						sortBy: "clicks-desc"
					}
				}
			}
		},
		onLoad() {
			this.getSearchCourse()
		},
		methods: {
			//切换tabs
			changeTabs({
				index
			}) {
				this.current = index;
				this.tabsCom(index);
			},
			//切换swiper
			changeSwiper(e) {
				this.current = e.detail.current;
				this.tabsCom(e.detail.current);
			},
			//判断动态组件显示
			tabsCom(index) {
				switch (index) {
					case 0:
						this.activeCom = Recommend;
						break;
					case 1:
						this.activeCom = Free;
						break;
					case 2:
						this.activeCom = ActualCombat;
						break;
				}
			},
			// 获取大家都在看的数据
			getSearchCourse() {
				//查询课程
				searchCourse(this.courseParams).then(res => {
					this.courseList = [...this.courseList, ...res.pageInfo.list];
				})
			},
			// 滚动到底部
			lower() {
				this.courseParams.pageNum++
				this.getSearchCourse()
				console.log(1);

			}
		},
		components: {
			appHeader,
			Recommend,
			Free,
			ActualCombat
		},
		onReady() {
			this.swiperHeight = this.getHeight('.header-search','.home-tabs')
		}
	}
</script>

<style>
	/deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 29rpx;
		font-weight: 400;
	}

	/deep/ ::-webkit-scrollbar {
		display: block;
		width: 0px !important;
		height: 0px !important;
	}
</style>